<wide-header-page title="{{'Payment Proposal'|translate}}" [hasSlideButton]="(tx && !tx.removed) && (tx && tx.pendingForUs && canSign && !paymentExpired) && isCordova">
  <ion-buttons left>
    <button class="close-container disable-hover" (click)="close()" ion-button>
      <ion-icon ios="md-close" md="md-close"></ion-icon>
    </button>
  </ion-buttons>

  <div page-content>
    <div class="line-divider" *ngIf="tx"></div>
    <ion-list *ngIf="tx" class="bp-list">
      <ion-item>
        <div class="header-container">
          <div class="amount-label">
            <div class="amount">
              {{tx.amountValueStr}} {{tx.amountUnitStr | uppercase}}
            </div>
            <div class="alternative" *ngIf="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
          </div>
        </div>
      </ion-item>

      <div class="line-divider" *ngIf="tx && tx.removed"></div>

      <div *ngIf="tx && tx.removed" class="box-notification warning" text-wrap>
        <span translate>The payment was removed by creator</span>
      </div>
      <div class="line-divider" *ngIf="tx && tx.status != 'pending'"></div>

      <div *ngIf="tx && tx.status != 'pending'">
        <div class="box-notification info" text-center *ngIf="tx && tx.status == 'accepted'">
          <div text-wrap translate>Payment accepted, but not yet broadcasted</div>
          <button margin ion-button outline small icon-left (click)="broadcast(tx)" [disabled]="loading">
            <ion-icon name="cloud-upload"></ion-icon>
            <span translate>Broadcast Payment</span>
          </button>
        </div>
        <div class="box-notification success" *ngIf="tx && tx.status == 'broadcasted'" translate>
          Payment Sent
        </div>
        <div class="box-notification warning" *ngIf="tx && tx.status =='rejected'" translate>
          Payment Rejected
        </div>
      </div>

      <ion-item class="sub-title">
        <ion-label>
          <div class="main-label" translate>DETAILS</div>
        </ion-label>
      </ion-item>

      <ion-item *ngIf="tx && tx.feeStr && tx.action != 'received' && !(isShared && tx.coin === 'eth')">
        <ion-label>
          <div class="summary-item">
            <span translate>Miner fee</span>
            <b>{{tx.feeLevelName}}</b>
          </div>
        </ion-label>
        <ion-note item-end>
          <div class="summary-item-detail">
            {{tx.feeStr}}
          </div>
          <div class="secondary-note fee-details">
            {{tx.feeFiatStr}}
            <span *ngIf="tx.feeRateStr">
              &middot;
              <span>
                <span *ngIf="tx.feeRateStr">{{tx.feeRateStr}}
                  <span translate> of total amount</span>
                </span>
              </span>
            </span>
          </div>
        </ion-note>
      </ion-item>

      <div class="line-divider" *ngIf="(tx && !tx.removed) && isShared && (tx && tx.pendingForUs) && !paymentExpired"></div>

      <div padding class="proposal-rejection" *ngIf="(tx && !tx.removed) && isShared && (tx && tx.pendingForUs) && !paymentExpired && !tx.multisigContractAddress">
        <button ion-button clear color="danger" (click)="reject()" [disabled]="loading">
          {{'Reject Payment Proposal'| translate}}
        </button>
      </div>

      <div class="line-divider"></div>


      <page-multiple-outputs [tx]="tx"></page-multiple-outputs>

      <div class="line-divider"></div>

      <ion-item>
        <ion-label>
          <div class="summary-item">
            <span translate>Sending from</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <ion-row align-items-center class="wallet" *ngIf="wallet">
            <ion-col>
              <coin-icon [coin]="wallet.coin" [network]="wallet.network"></coin-icon>
            </ion-col>

            <ion-col>
              <span class="note-container ellipsis">{{wallet.name}}</span>
            </ion-col>
          </ion-row>
        </ion-note>
      </ion-item>

      <div class="line-divider" *ngIf="tx.creatorName && isShared"></div>

      <ion-item *ngIf="tx.creatorName && isShared">
        <ion-label>
          <div class="summary-item">
            <span translate>Created by</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <span class="note-container ellipsis summary-item-detail">{{tx.creatorName}}</span>
        </ion-note>
      </ion-item>

      <div class="line-divider" *ngIf="tx && tx.ts || tx.createdOn"></div>

      <ion-item *ngIf="tx && tx.ts || tx.createdOn">
        <ion-label>
          <div class="summary-item">
            <span translate>Time</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <span class="note-container ellipsis summary-item-detail">
            <time>{{ (tx.ts || tx.createdOn ) * 1000 | amDateFormat:'MM/DD/YYYY hh:mm a'}}</time>
          </span>
        </ion-note>
      </ion-item>

      <div class="line-divider" *ngIf="tx && tx.message"></div>

      <ion-item *ngIf="tx && tx.message">
        <ion-label>
          <div class="summary-item">
            <span translate>Memo</span>
          </div>
        </ion-label>
        <ion-note item-end>
          <span class="note-container ellipsis summary-item-detail">
            {{tx.message}}
          </span>
        </ion-note>
      </ion-item>

      <div class="line-divider" *ngIf="tx && tx.paypro"></div>

      <div *ngIf="tx && tx.paypro">
        <ion-item-divider>{{'Payment request' | translate}}</ion-item-divider>
        <ion-item *ngIf="paymentExpired">
          <ion-label>
            {{'Expired'|translate}}
          </ion-label>
          <ion-note color="danger" item-end>
            <time>{{tx.paypro.expires | amTimeAgo }}</time>
          </ion-note>
        </ion-item>
        <ion-item *ngIf="!paymentExpired">
          <ion-label>
            {{'Expires'|translate}}
          </ion-label>
          <ion-note item-end>
            <time>{{expires}}</time>
          </ion-note>
        </ion-item>
        <ion-item *ngIf="tx.paypro.memo">
          <span translate>Merchant Message</span>
          <div class="item-memo" *ngIf="tx.paypro.memo" text-wrap>
            <ion-note>{{tx.paypro.memo}}</ion-note>
          </div>
        </ion-item>
      </div>

      <div class="line-divider" *ngIf="actionList && actionList[0]"></div>

      <div *ngIf="actionList && actionList[0]">
        <ion-item>
          <span>{{'Timeline' | translate}}</span>
          <div class="timeline-item" [ngClass]="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject' || a.type == 'failed'}" *ngFor="let a of actionList; let i = index">
            <div class="timeline-content">
              <div class="timeline-content-icon">
                <div class="rejected" *ngIf="a.type === 'reject' || a.type == 'failed'">!</div>
                <div class="line" *ngIf="a.type !== 'reject' && a.type !== 'failed'">{{actionList.length - i}}</div>
              </div>
              <div class="timeline-content-label">
                <div class="action ellipsis">{{a.description}}</div>
                <div *ngIf="tx.coin !== 'eth'" class="name ellipsis">{{a.by}}</div>
              </div>
              <ion-note class="ellipsis">
                <time>{{ a.time * 1000 | amTimeAgo}}</time>
              </ion-note>
            </div>
          </div>
        </ion-item>
      </div>

      <div padding class="proposal-deletion" *ngIf="(((tx && !tx.removed) && (tx && tx.canBeRemoved)) || (tx && tx.status == 'accepted' && !tx.broadcastedOn)) && (!isShared || !tx.multisigContractAddress)">
        <div class="proposal-deletion-help" *ngIf="isShared" translate>
          * A payment proposal can be deleted if 1) you are the creator, and no other copayer has signed, or 2) 10 minutes have passed since the proposal was created.
        </div>
        <button ion-button clear color="danger" (click)="remove()" [disabled]="loading">
          {{'Delete Payment Proposal' | translate}}
        </button>
      </div>

    </ion-list>
  </div>

  <div footer-content>
    <page-slide-to-accept #slideButton *ngIf="(tx && !tx.removed) && (tx && tx.pendingForUs && canSign && !paymentExpired) && isCordova && !(isShared && tx.coin === 'eth')" [buttonText]="buttonText" [isDogecoin]="tx && tx.coin == 'doge'" (slideDone)="onConfirm()">
    </page-slide-to-accept>
    <ion-toolbar *ngIf="(tx && !tx.removed) && (tx && tx.pendingForUs && canSign && !paymentExpired) && (!isCordova || isShared && tx.coin === 'eth')">
      <button ion-button full class="button-footer" (click)="onConfirm()">{{buttonText}}</button>
    </ion-toolbar>
  </div>
</wide-header-page>